<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>property</title>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../vue.js"></script>

</head>

<body>

  <!-- app -->
  <div id="app">
    Vue 实例 — Vue.js<br /><br />
    https://cn.vuejs.org/v2/guide/instance.html<br /><br />
    除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。
    <br />
    <p>{{a}}</p>
    <span v-once>这个将不会改变: {{ a }}</span><br />
    <button v-on:click="a++">Change it</button><br />
    <p>Using mustaches: {{ rawHtml }}</p><br />
    <p>Using v-html directive: <span v-html="rawHtml"></span></p><br />
    <a v-bind:[attributename]="url">动态参数 2.6.0 新增</a>
  </div>

  <script>

    // start app
    var data = {
      a: 1,
      rawHtml : '<b>This should be red.</b>',
      attributename : 'href',
      url : 'http://cn.vuejs.org/'
    }

    var vm = new Vue({
      el: '#app',
      data: data,
      customOption: 'customOption',
      created: function () {
        console.log(this.$options.customOption);
        console.log(this.a);
      }
      // created: () => console.log('this.a')
    })

    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
      console.log('oldValue is :' + oldValue);
      console.log('newValue is :' + newValue);
    })

    // var unwatch = vm.$watch('a', cb);
    // 之后取消观察
    // unwatch();
  </script>
</body>

</html>